
<template>
  <div>
    <van-nav-bar
      title="水产品"
      left-text="返回"
      left-arrow
      @click="onClickLeft"
    />


    <div>
      <van-search v-model="value" placeholder="请输入搜索关键词" />
    </div>

   <div class="c1">
        <dl>
            <dt>
                <img src="../../assets/sc1.png" />
            </dt>
            <dd>
                <p>鱿鱼 枪乌贼</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
    <div class="c2">
        <dl>
            <dt>
                <img src="../../assets/sc2.png" />
            </dt>
            <dd>
                <p>海参 海鼠</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
    <div class="c3">
        <dl>
            <dt>
                <img src="../../assets/sc3.png" />
            </dt>
            <dd>
                <p>紫菜 紫英</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
    <div class="c4">
        <dl>
            <dt>
                <img src="../../assets/sc4.png" />
            </dt>
            <dd>
                <p>海带 长寿菜</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
    <div class="c5">
        <dl>
            <dt>
                <img src="../../assets/sc5.png" />
            </dt>
            <dd>
                <p>海蜇 水母</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
    <div class="c6">
        <dl>
            <dt>
                <img src="../../assets/sc6.png" />
            </dt>
            <dd>
                <p>黄鱼 桂花黄鱼</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
    <div class="c7">
        <dl>
            <dt>
                <img src="../../assets/sc7.png" />
            </dt>
            <dd>
                <p>带鱼 裙带鱼</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
    <div class="c8">
        <dl>
            <dt>
                <img src="../../assets/sc8.png" />
            </dt>
            <dd>
                <p>鳕鱼 大头肯</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
    <div class="c9">
        <dl>
            <dt>
                <img src="../../assets/sc9.png" />
            </dt>
            <dd>
                <p>鲜贝 西施鲜贝</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
     <div class="c10">
        <dl>
            <dt>
                <img src="../../assets/sc10.png" />
            </dt>
            <dd>
                <p>金枪鱼 郁鱼、吞拿鱼</p>
                <span>怀孕 坐月子 哺乳 婴儿</span>
            </dd>
        </dl>

    </div>
    </div>
</template>

<script setup lang='ts'>

import { ref } from 'vue'
 const value = ref('');


const onClickLeft = () => history.back()

</script>

<style lang="scss" scoped>

.c1{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.c2{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.c3{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.c4{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.c5{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.c6{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.c7{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.c8{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.c9{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
.c10{
    width: 100%;
    height: 100px;
    dl{
        width: 100%;
    }
    dt{
        float: left;
        margin: 5px;
    }
    dd{
        margin-left: 10px;
        span{
            margin-left: 10px;
        }
        
    }
}
</style>
